<template>
  <div class="chart-container hide-scroller-bar">
    <div style="height: 24%; min-height: 160px">
      <SecurityAccumulate />
    </div>
    <div style="height: 39%; min-height: 160px">
      <RealMonitor />
    </div>
    <div style="height: 37%; min-height: 160px">
      <MonitorCapture />
    </div>
    <template v-if="$store.getters.dataVMobile">
      <div style="height: 45%; min-height: 160px">
        <FireAlarmInfo />
      </div>
      <div style="height: 55%; min-height: 160px">
        <PassRecord />
      </div>
      <div style="width: 100%; height: 50%; min-height: 160px">
        <AlarmRecord />
      </div>
    </template>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import SecurityAccumulate from "./SecurityAccumulate.vue";
import RealMonitor from "./RealMonitor.vue";
import MonitorCapture from "./MonitorCapture.vue";
import FireAlarmInfo from "./FireAlarmInfo.vue";
import PassRecord from "./PassRecord.vue";
import AlarmRecord from "./AlarmRecord.vue";

export default defineComponent({
  name: "SecurityLeft",
  components: {
    SecurityAccumulate,
    RealMonitor,
    MonitorCapture,
    FireAlarmInfo,
    PassRecord,
    AlarmRecord,
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
</style>
